<template>
  <div class="container" ref="mainCon">
    <topTitle :titleText="titleText" @gobackTriser="goBack"></topTitle>
    <div class="mainCon">
      <el-row
        class="toolbar searchInputWidth"
        style="padding-bottom: 0; margin-bottom: 0"
      >
        <el-form :inline="true" :model="filterField">
          <el-col :lg="8" :xl="6">
            <el-form-item label="模板用途范围" class="row-padding-bottom">
              <el-select
                v-model="filterField.range"
                clearable
                filterable
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) of rangeData"
                  :key="index"
                  :label="item.name"
                  :value="item.code"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xl="6">
            <el-form-item label="通知模板名称" class="row-padding-bottom">
              <el-select
                v-model="filterField.type"
                clearable
                filterable
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) of typeData"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xl="6">
            <el-form-item class="btn">
              <el-button
                type="primary"
                icon="icon iconfont iconchazhao1"
                @click="searchList"
                class="searchBtn"
              >
                <span>搜索</span>
              </el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div class="spacing"></div>
      <div
        ref="tableBox"
        :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
      >
        <div style="margin-bottom: 24px">
          <el-button
            class="commonBut saveBtn funComBut"
            icon="icon iconfont icontianjia"
            @click="toAdd"
            v-hasBtn="'messageTemplate:add'"
          >
            <span class="opetareText">新增通知模板</span>
          </el-button>
          <el-button
            class="commonBut saveBtn funComBut"
            @click="toRestore"
            v-hasBtn="'messageTemplate:update'"
          >
            <span class="opetareText">恢复默认</span>
          </el-button>
        </div>
        <el-table
          ref="tableBox1"
          :max-height="tableHeight"
          :data="tableList"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          v-loading="loading"
          style="border: 1px solid #dfe6ec"
          @sort-change="sortChange"
        >
          <el-table-column
            prop="name"
            label="通知模板名称"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="rangeValue"
            label="模板用途范围"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="creatorName"
            label="创建人"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="createTime"
            sortable="custom"
            label="创建时间"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="content"
            label="通知模板内容"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            label="操作"
            align="left"
            min-width="100"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-link
                type="primary"
                @click="toEdit(scope.row)"
                v-hasBtn="'messageTemplate:update'"
                >修改</el-link
              >
              <el-link
                type="primary"
                @click="toDel(scope.row)"
                v-hasBtn="'messageTemplate:delete'"
                >删除</el-link
              >
              <!-- <span v-show="!isShowDel && !isShowUpdate">--</span> -->
            </template>
          </el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无相关信息"></emptyTable>
          </div>
        </el-table>
        <!-- filterField为搜索条件 -->
        <!-- getTableList为获取子组件的数据 -->
        <Pagination
          ref="pagination"
          @getList="getTableList"
          :filterField="filterField"
          :requestUrl="requestUrl"
          @getpageNo="getpageNo"
          @getpageSize="getpageSize"
        ></Pagination>
      </div>

      <el-dialog
        :title="addOrEdit == 0 ? '添加通知模板' : '修改通知模板'"
        :visible.sync="formVisible"
        :close-on-click-modal="false"
        @close="cancel('formData')"
        custom-class="brand-dialog-min-width"
        :modal-append-to-body="false"
        :append-to-body="true"
      >
        <el-form :model="formData" :rules="formRules" ref="formData">
          <el-form-item
            label="通知模板名称"
            :label-width="formLabelCardWidth"
            prop="name"
          >
            <el-input
              placeholder="请输入内容"
              v-model="formData.name"
              clearable
              maxlength="50"
              show-word-limit
            ></el-input>
          </el-form-item>
          <el-form-item
            label="通知模板范围"
            :label-width="formLabelCardWidth"
            prop="range"
          >
            <el-select
              v-model="formData.range"
              clearable
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) of rangeData"
                :key="index"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="通知模板内容"
            :label-width="formLabelCardWidth"
            prop="content"
          >
            <el-input
              type="textarea"
              :rows="3"
              placeholder="请输入内容"
              clearable
              maxlength="500"
              show-word-limit
              v-model="formData.content"
            >
            </el-input>
            <!-- <el-input placeholder="请输入内容" v-model="formData.dicitemId" clearable maxlength="50" show-word-limit></el-input> -->
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click.native="cancel('formData')" class="cancel"
            >取消</el-button
          >
          <el-button
            type="primary"
            @click.native="saveBankInfo('formData')"
            class="save"
            :loading="canLogin"
            >保存</el-button
          >
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import scrollTable from '@/mixin/scrollTable.js'

export default {
  name: 'messageTemplate',
  mixins: [scrollTable],
  data() {
    return {
      isShow: false,
      titleText: '通知模板',
      //表格数据
      tableList: [],
      requestUrl: 'api-i/infotemplate/expand/list',
      //搜索条件
      filterField: {
        type: '',
        range: '',
      },
      pageSize: 20,
      pageNo: 1,
      rangeData: [
        {
          code: 'CS',
          name: '建筑',
        },
        {
          code: 'NC',
          name: '非建',
        },
      ],
      typeData: [],
      loading: false,
      formVisible: false,
      //   弹窗数据
      // dicitemType  laber  dicitemId  dicitemName  orderNo  remark  isDeleted
      formData: {
        name: '',
        range: '',
        content: '',
      },
      formRules: {
        name: [
          {
            required: true,
            message: '模板名称不能为空',
            trigger: 'blur',
          },
        ],
        range: [
          {
            required: true,
            message: '模板范围不能为空',
            trigger: 'blur',
          },
        ],
        content: [
          {
            required: true,
            message: '模板内容不能为空',
            trigger: 'blur',
          },
        ],
      },
      formLabelCardWidth: '125px',
      canLogin: false,
      addOrEdit: 0,
      tabPosition: 'setCashDeposit',
      // isShowDel:"",
      // isShowUpdate:"",
      // isShowAdd:"",
      // isShowSave:""
    }
  },
  created() {
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
    // this.getAreaList();
    this.getTypeList()
    // this.isShowAdd = this.$store.state.buttonLimitsArr.indexOf('messageTemplate:add') > -1 ;
    // this.isShowUpdate = this.$store.state.buttonLimitsArr.indexOf('messageTemplate:update') > -1 ;
    // this.isShowDel = this.$store.state.buttonLimitsArr.indexOf('messageTemplate:delete') > -1 ;
    // this.isShowSave = this.$store.state.buttonLimitsArr.indexOf('messageTemplate:add') > -1 || this.$store.state.buttonLimitsArr.indexOf('messageTemplate:update') > -1;
  },
  activated() {
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData(this.pageNo, this.pageSize)
    })
  },
  methods: {
    getpageSize(val) {
      this.pageSize = val
    },
    getpageNo(val) {
      this.pageNo = val
    },
    getTableList(data) {
      this.tableList = data
      this.loading = false
      if (this.tableList.length < 1) {
        this.isShow = true
      }
    },
    // 搜索
    searchList() {
      this.$refs.pagination.getTableListData()
    },
    getTypeList() {
      this.axios({
        method: 'post',
        // data:{"type":"infoCenterType"},
        url: 'api-i/infotemplate/expand/name',
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.typeData = response.data.result
            } else {
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    toAdd() {
      this.addOrEdit = 0
      this.formVisible = true
      this.addAreaId = ''

      // dicitemType  laber  dicitemId  dicitemName  orderNo  remark  isDeleted
      this.formData = {
        name: '',
        range: '',
        content: '',
        id: '',
      }

      // 去除之前的验证
      this.$nextTick(() => {
        this.$refs.formData.clearValidate()
      })
    },
    toEdit(row) {
      this.addOrEdit = 1
      this.formVisible = true
      this.formData = {
        name: row.name,
        range: row.range,
        content: row.content,
        id: row.id,
      }
    },
    saveBankInfo() {
      this.canLogin = true
      this.$refs.formData.validate((valid) => {
        if (valid) {
          if (this.addOrEdit == '0') {
            this.toAddInfo()
          } else {
            this.toUpdateInfo()
          }
        } else {
          this.canLogin = false
        }
      })
    },
    toAddInfo() {
      this.axios({
        method: 'post',
        url: 'api-i/infotemplate/expand/add',
        data: this.formData,
      })
        .then(
          (response) => {
            this.canLogin = false
            if (!response.data.hasError) {
              this.$message({
                message: '添加成功',
                type: 'success',
              })
              this.formVisible = false
              this.$refs.pagination.getTableListData()
            } else {
              this.$message({
                message: response.data.errorMsg,
                type: 'error',
              })
            }
          },
          (response) => {
            this.canLogin = false
          }
        )
        .catch((error) => {
          this.canLogin = false
        })
    },
    toUpdateInfo() {
      this.axios({
        method: 'post',
        url: 'api-i/infotemplate/expand/modify',
        data: this.formData,
      })
        .then(
          (response) => {
            this.canLogin = false
            if (!response.data.hasError) {
              this.$message({
                message: '修改成功',
                type: 'success',
              })
              this.formVisible = false
              this.$refs.pagination.getTableListData(this.pageNo, this.pageSize)
            } else {
              this.$message({
                message: response.data.errorMsg,
                type: 'error',
              })
            }
          },
          (response) => {
            this.canLogin = false
          }
        )
        .catch((error) => {
          this.canLogin = false
        })
    },
    cancel(formData) {
      this.$refs['formData'].resetFields()
      this.formVisible = false
    },
    toDel(row) {
      this.$confirm('确认删除?', '提示', {
        cancelButtonClass: 'btn-custom-cancel',
        type: 'warning',
      })
        .then(() => {
          this.del(row)
        })
        .catch(() => {
          // this.$message.error("删除失败");
        })
    },
    del(row) {
      this.axios({
        method: 'post',
        url: 'api-i/infotemplate/expand/delete',
        data: {
          id: row.id,
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.$message({
                message: '删除成功',
                type: 'success',
              })
              this.$refs.pagination.getTableListData(this.pageNo, this.pageSize)
            } else {
              this.$message({
                message: response.data.errorMsg,
                type: 'error',
              })
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    toRestore() {
      this.$confirm('确认恢复?', '提示', {
        cancelButtonClass: 'btn-custom-cancel',
        type: 'warning',
      })
        .then(() => {
          this.restore()
        })
        .catch(() => {
          // this.$message.error("删除失败");
        })
    },
    restore() {
      this.axios({
        method: 'post',
        url: 'api-i/infotemplate/expand/default',
        // data:{
        //   id:row.id
        // }
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.$message({
                message: '恢复成功',
                type: 'success',
              })
              this.$refs.pagination.getTableListData()
            } else {
              this.$message({
                message: response.data.errorMsg,
                type: 'error',
              })
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
  },
}
</script>

<style scoped lang="less">
.mainCon {
  top: 196px;
}

.brand-dialog-min-width .el-select {
  width: 100%;
}
</style>
